<template>
    <div class="proup" id="inputPP">
      <div class="ptem">
        <div class="i2d6">标题</div>
        <div class="i4d6"><input v-model="rel.property.title"></div>
      </div>
      <div class="ptem">
        <div class="i2d6">描述</div>
        <div class="i4d6"><input v-model="rel.property.intro"></div>
      </div>
      <div class="ptem">
        <div class="i2d6">
          <label>分割线样式</label>
        </div>
          <div class="i6d6 btn-group">
            <el-radio-group v-model="rel.property.hr.lineStyle" size="mini">
              <el-radio-button label="hr">——</el-radio-button>
              <el-radio-button label="hr-dashed">------</el-radio-button>
              <el-radio-button label="hr-dotted">······</el-radio-button>
              <el-radio-button label="hr-double">════</el-radio-button>
            </el-radio-group>
        </div>
      </div>
      <div class="ptem">
        <div class="i6d6">
          <label><input type="checkbox" v-model="rel.property.hr.fillWidth">线条与表单等宽</label>
        </div>
      </div>
      <hr>
      <div class="ptem">
        <div class="i2d6">
          <label>标题对齐方式</label>
        </div>
        <div class="i4d6">
          <div class="i6d6 btn-group">
            <el-radio-group v-model="rel.property.titleAlign" size="mini">
              <el-radio-button label="left">居左</el-radio-button>
              <el-radio-button label="center">居中</el-radio-button>
              <el-radio-button label="right">居右</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="ptem">
        <div class="i2d6">
          <label>描述对齐方式</label>
        </div>
        <div class="i4d6">
          <div class="i6d6 btn-group">
            <el-radio-group v-model="rel.property.introAlign" size="mini">
              <el-radio-button label="left">居左</el-radio-button>
              <el-radio-button label="center">居中</el-radio-button>
              <el-radio-button label="right">居右</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      
      
    </div>
</template>

<script>
export default{
  props:["rel"],
  data:function(){
    return {
    }
  },
  methods:{
    align:function(align){
      this.rel.property.introAlign = align
    },
    lineStyle:function(style){
      this.rel.property.hr.lineStyle=style
    }
  }
}
</script>

<style>
</style>
